<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery分步步骤</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.step.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery.step.min.js"></script>
	</head>
	<body>
		<div class="main">
			<div id="step"></div>
			<div class="btns">
				<button id="prevBtn">上一步</button>
				<button id="nextBtn">下一步</button>
				<button id="btn1">跳到第二步</button>
				<button id="btn2">跳到第三步</button>
			</div>
			<div class="info">index：<span id="index"></span></div>
		</div>

		<script type="text/javascript">
			var $step = $("#step");
			var $index = $("#index");

			$step.step({
				index: 0,
				time: 500,
				title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]
			});

			$index.text($step.getIndex());

			$("#prevBtn").on("click", function() {
				$step.prevStep();
				$index.text($step.getIndex());
			});

			$("#nextBtn").on("click", function() {
				$step.nextStep();
				$index.text($step.getIndex());
			});

			$("#btn1").on("click", function() {
				$step.toStep(1);
				$index.text($step.getIndex());
			});

			$("#btn2").on("click", function() {
				$step.toStep(2);
				$index.text($step.getIndex());
			});
		</script>
	</body>
</html>